<script setup>
import { ref, watch } from 'vue'
import { upload } from '@/service/file.js'
import { Close } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: {
    type: String, // 根据实际图片地址类型定义，也可支持Array等
    default: '',
  },
  width: {
    type: Number,
    default: 120,
  },
  height: {
    type: Number,
    default: 120,
  },
})
const emit = defineEmits(['update:modelValue'])

const previewList = ref(props.modelValue ? [props.modelValue] : [])

watch(
  () => props.modelValue,
  (newVal) => {
    previewList.value = newVal ? [newVal] : []
  },
  { immediate: true }
)

const fileInput = ref()
function openFileSelector() {
  fileInput.value.click()
}

async function handleFileSelect(event) {
  const fileList = event.target.files
  if (!fileList || fileList.length === 0) return
  const file = fileList[0]
  const res = await upload(file)
  event.target.value = ''
  emit('update:modelValue', res.data) // 更新 v-model 值
  event.target.value = ''
}

function onTapDeleteButton() {
  previewList.value = []
  emit('update:modelValue', '') // 注意：这里改成空字符串（null 可能导致校验判断异常）
}
</script>

<template>
  <div v-if="modelValue" class="image-list-image" :style="{ width: `${width}px`, height: `${height}px` }">
    <el-image
      :style="{ width: `${width - 10}px`, height: `${height - 10}px` }"
      :src="modelValue"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="previewList"
      show-progress
      :initial-index="0"
    />
    <div class="image-list-image-close-button" @click="onTapDeleteButton">
      <el-icon size="14"><Close /></el-icon>
    </div>
  </div>
  <div
    v-if="!modelValue"
    class="image-list-add-button"
    :style="{ width: `${width}px`, height: `${height}px` }"
    @click="openFileSelector"
  >
    <span class="add-icon">+</span>
    <input
      @change="handleFileSelect"
      ref="fileInput"
      type="file"
      id="fileInput"
      class="hidden-file-input"
      accept="image/*"
    />
  </div>
</template>

<style scoped lang="scss">
.image-list-image {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1); // hover 时蓝色阴影，强化主题
  }
  .image-list-image-close-button {
    position: absolute;
    right: 8px; // 调整为内部右上角，避免超出
    top: 8px;
    width: 24px; // 适当扩大点击区域
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景，不遮挡图片
    border-radius: 50%; // 圆形按钮
    color: #ffffff; // 白色图标
    cursor: pointer; // 鼠标悬浮变指针，提示可点击
    transition: all 0.2s ease; // 过渡动画，更丝滑
    z-index: 10; // 确保在图片上方，不被覆盖
    // hover 效果：加深背景色+轻微放大
    &:hover {
      background-color: rgba(239, 68, 68, 0.8); // 红色背景，突出删除意图
      transform: scale(1.1); // 轻微放大，增强交互反馈
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // 阴影增强层次感
    }

    // 点击时按压效果
    &:active {
      transform: scale(0.95);
    }
  }
}

.image-list-add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #ffffff; // 默认纯白背景，更干净
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); // 轻微阴影增强层次感
  padding: 4px;
  &:hover {
    border-color: #409eff; // 主题色边框
    background-color: #ecf5ff; // 淡蓝色背景（与 #409EFF 匹配，更协调）
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1); // hover 时蓝色阴影，强化主题
  }
}

.image-list-add-button:hover .add-icon {
  color: #409eff;
}

.add-icon {
  font-size: 28px;
  color: #94a3b8;
  font-weight: 300;
  transition: color 0.2s ease;
}
.hidden-file-input {
  display: none;
}
</style>
